<template>
  <!--    添加角色弹窗-->
  <el-dialog title="添加新用户" v-model="addDialogVisible" width="50%" @close="addDialogClosed">
    <!-- 内容主体区 -->
    <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserFormRef" label-width="100px">
      <el-form-item label="用户名/手机号" prop="username"> <!-- prop是验证规则属性 -->
        <el-col :span="12"><el-input v-model="addUserForm.username"></el-input></el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="12"><el-input v-model="addUserForm.password"></el-input></el-col>
      </el-form-item>
    </el-form>
    <!-- 底部区-->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addUser()">
          确定
        </el-button>
        <el-button @click="addDialogVisible = false" id="cancel">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <div id="tanc_user" >
    <div class="userHeader">
      <b>审核员详情</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <auditor-child :userId="currentID" v-if="isOpen"></auditor-child>
  </div>

  <el-container>
    <el-header class="auditor_header">
        审核员管理
      </el-header>

    <el-main>
      <el-row>
        <el-col :span="4"><el-input v-model="search" placeholder="请输入审核员姓名/手机号" ></el-input></el-col>
        <el-col :span="1"><el-button type="primary" @click="conditionFind(search)">搜索</el-button></el-col>
        <el-col :span="1"><el-button type="primary" @click="addDialogVisible = true">添加新审核员</el-button></el-col>
      </el-row>
        <el-table :data="list" stripe border style="width: 100%;height: 480px;">
          <el-table-column  label="序号"  >
            <template #default="scope">
              {{number(scope.row.no)}}
            </template>
          </el-table-column>

          <el-table-column prop="realName" label="审核员姓名" ></el-table-column>
<!--          <el-table-column prop="sex" label="性别" width="180"></el-table-column>-->
          <el-table-column prop="username" label="手机号码" ></el-table-column>
          <el-table-column prop="registerDate" label="添加时间" ></el-table-column>
<!--          <el-table-column prop="num" label="昨日审核数量"></el-table-column>-->
          <el-table-column prop="action" label="操作" width="200px">
            <template v-slot:default='scope'>

              <el-button  type="primary" @click="showDetail(scope.row.userId)">查看详情</el-button>
              <el-popconfirm title="确定要删除吗?" @confirm="deleteUser(scope.row.userId)">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
    </el-main>

    <el-footer>
      <el-config-provider :locale="locale">
      <el-pagination
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          @size-change="ChangePage"
          @current-change="ChangePage"
      />
      </el-config-provider>
    </el-footer>

  </el-container>
  <!--模糊背景-->
  <div id="hidebg"></div>
</template>

<script>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import axios from "axios";
import auditorChild from "@/router/administrator/auditorManage/auditorChild";
import {ElMessage} from "element-plus";

export default {
  name: "auditorManagement",
  components:{
    auditorChild
  },
  data(){
    return{
      isOpen:false,
      locale:zhCn,
      pageSize:10,
      total:10,
      currentPage:1,
      search: '',
      addDialogVisible: false, //控制添加角色对话框显示
      addUserForm: {},
      list: [],
      isDetail:false,
      currentID:'',
      inputId: '',
      //添加表单的验证规则对象
      addUserFormRules: {
        password: [{required:true,message:'请输入密码',trigger:'blur'},
          {min:2,max:10,message:'密码长度在3~10个字符',trigger:'blur'}],
        username: [{required:true,message:'请输入手机号',trigger:'blur'},
          {min:11,max:11,message:'请输入11位手机号',trigger:'blur'}],
      },

      usertype:"审核员",
    }
  },
  created() {
    this.getList();
  },
  methods:{
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('tanc_user') .style.display='none'
      this.isOpen=false
      this.changePage()

    },
    ChangePage(){
      this.getList()
    },
    conditionFind(a){
      axios({
        method: 'post',
        url: '/api/manager/findUser',
        params: {
          pageNum:this.currentPage,
          pageSize:this.pageSize,

        },
        data:{
          condition:a,
          userType:this.usertype
        }
      }).then((res) => {

        this.list=res.data.data.usersList;
        for(var i=0;i<this.list.length;i++){
          this.list[i]['no']=i+1;
        }
        this.total=res.data.data.total;
      })
    },
    // 获取审核员列表
    getList:function (){
      axios({
        method: 'post',
        url: '/api/manager/showUser',
        params: {
          pageNum:this.currentPage,
          pageSize:this.pageSize,
        },
        data:{
          userType:this.usertype
        }
      }).then((res) => {

        this.list=res.data.data.usersList;
        for(var i=0;i<this.list.length;i++){
          this.list[i]['no']=i+1;
        }
        this.total=res.data.data.total;
      })
    },
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    //展示详情页
    showDetail(a){
      this.currentID=a;
      var hideobj=document.getElementById("hidebg");
      hideobj.style.display="block";  //显示隐藏层
      //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
      document.getElementById("tanc_user").style.display="block";  //显示弹出层
      this.isOpen=true;
    },
    //监听添加用户对话框的关闭状态
    addDialogClosed(){
      this.$refs.addUserFormRef.resetFields();
    },
    //删除用户
    deleteUser(a){//删除
      axios({
        method: 'post',
        url: '/api/manager/deleteUser',
        params:{
          userid:a
        }
      }).then((res) => {
        if(res.data.code==='1'){
          // alert("删除成功")
          ElMessage.success('删除成功')
          this.getList();
        }else{
          // alert("删除失败")
          ElMessage.error('删除失败')
        }
      })
    },
    // 点击按钮，添加新用户
    addUser() {
      // axios({
      //   method: 'post',
      //   url: '/api/manager/addUser',
      //   data:{
      //     username:this.addUserForm.username,
      //     password: this.addUserForm.password,
      //     userType: this.usertype,
      //   }
      // }).then((res) => {
      //   if(res.data.code==='1'){
      //     // alert("添加成功")
      //     ElMessage.success('添加成功')
      //     this.getList()
      //   }else{
      //     // alert("添加失败")
      //     ElMessage.error('添加失败')
      //   }
      //   this.addDialogVisible = false
      // })
      this.$refs.addUserFormRef.validate(valid =>{
        if(!valid)  return;
        axios({
          method: 'post',
          url: '/api/manager/addUser',
          data:{
            username:this.addUserForm.username,
            password: this.addUserForm.password,
            userType: this.usertype,
          }
        }).then((res) => {
          if(res.data.code==='1'){
            // alert("添加成功")
            ElMessage.success('添加成功')
            this.getList()
          }else{
            // alert("添加失败")
            ElMessage.error('添加失败')
          }
          this.addDialogVisible = false
        })
      })
    }
  },
}
</script>

<style scoped>
#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color:#000;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
.el-pagination{
  justify-content: center !important;
}
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{

  text-align: center;
  position: relative;
  bottom: 0px;

}
#tanc_user{
  display: none;
  transform: translate(-50%,-50%);
  height: 350px;
  width: 400px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
}
.el-row{
  margin-bottom: 20px !important;
}
.userHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
</style>